import React, { Component } from 'react';
import styles from './index.less';
import Title from '../Title';
import { Table } from 'antd';

const columns = [
  { title: '序号', dataIndex: 'key', key: 'key', width: 50 },
  { title: '名称职位', dataIndex: 'name', key: 'name', width: 70 },
  { title: '指标', dataIndex: 'indicators', key: 'indicators', width: 50 },
  { title: '等级', dataIndex: 'level', key: 'level', width: 50 },
  { title: '多少时间', dataIndex: 'time', key: 'time', width: 70 },
];

const tableData = [
  {
    key: 1,
    name: '电厂1',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 2,
    name: '电厂2',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 3,
    name: '电厂3',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 4,
    name: '电厂4',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 5,
    name: '电厂5',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 6,
    name: '电厂6',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 7,
    name: '电厂7',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 8,
    name: '电厂8',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 9,
    name: '电厂9',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
  {
    key: 10,
    name: '电厂10',
    indicators: '飞灰',
    level: '二级',
    time: '2022/03/07 13:01',
  },
];

export default class extends Component {
  state = { height: 0 };

  componentDidMount() {
    this.setHeight();
    window.addEventListener('resize', this.eventHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.eventHeight);
  }

  eventHeight = () => {
    this.setHeight();
  };

  setHeight = () => {
    const tableComp = document.getElementById('tableHight');
    this.setState({ height: tableComp.clientHeight });
  };

  render() {
    const { height } = this.state;
    const newHeight = height - 108;

    return (
      <div className={styles.root}>
        <div className={styles.table} id="tableHight">
          <Title text={'环保告警'} icon={require('../../img/icon4.png')} />
          <div className={styles.tableComp}>
            <Table
              columns={columns}
              dataSource={tableData}
              scroll={{ x: '100%', y: newHeight }}
              pagination={false}
            />
          </div>
        </div>
      </div>
    );
  }
}
